import React, { Component } from 'react';
import { Platform, TouchableOpacity } from 'react-native';
import {
  Text,
  Center,
  View,
  Image,
  ScrollView,
  SearchIcon,
  Button
} from 'native-base';
import side from '../../capsulation/sider';
import EmptyMsg from './emptyMsg';
class Common extends Component {
  constructor(props) {
    super(props);
    this.state = {
      search_word: this.props.search_word,
      search_time: this.props.time === '全部' ? '' : this.props.time,
      laiyuan: [],
      length: '',
      name: [],
      niandai: [],
      photo1: [],
      photo2: [],
      photo3: [],
      show: [],
      longPressImg:false,//是否显示长按图片出来的东西
    };
  }
  componentDidMount() {
    this.searchMsg(this.state.search_word, this.state.search_time);
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    //判断
    if (prevProps.num !== this.props.num) {
      let photo3;
      if (this.props.num === 0) {
        photo3 = this.state.photo1.slice(this.props.num, this.props.num + 10);
      } else {
        photo3 = this.state.photo3.concat(
          this.state.photo1.slice(this.props.num, this.props.num + 10),
        );
      }
      this.setState({
        photo3,
      });
    }
    //判断收索的内容是否改变，改变返回true
    // console.log('true123',prevProps.search_word,this.props.search_word,prevProps.time,this.props.time)
    if (
      prevProps.search_word !== this.props.search_word ||
      prevProps.time !== this.props.time
    ) {
      return true;
    }
    return false;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    // console.log('sn',this.props.search_word,this.props.time,snapshot)
    if (snapshot) {
      console.log('我成功了')
      this.setState({
        num: 0,
        laiyuan: [],
        length: 0,
        name: [],
        niandai: [],
        photo1: [],
        photo2: [],
        photo3: []
      });
      this.searchMsg(this.props.search_word, this.props.time);
    }
  }
  // 获取搜索的信息并添加到state中
  searchMsg(value, time) {
    time = time === '全部' ? '' : time;
    fetch(
      `https://www.guyinbaike.com/apiSearch?search_word=${side.getSider(value)}&search_age=${time}`,
      {
        headers: {
          'Accept-Encoding': 'gzip',
          'user-agent': 'chrome',
        },
      },
    )
      .then(response => {
        // console.log(response)
        return response.json();
      })
      .then(data => {
        console.log('搜索', this.props.num);
        let { laiyuan, length, name, niandai, photo1, photo2 } = data;
        this.setState({
          laiyuan: laiyuan,
          length: length,
          name: name,
          niandai: niandai,
          photo1: photo1,
          photo2: photo2,
          photo3: this.state.photo3.concat(
            photo1.slice(this.props.num, this.props.num + 10),
          ),
          show: new Array(length),
        });
      })
      .catch(err => {
        console.log(err.toString());
      });
  }
  //点击切换图片
  switchImg(index) {
    const show = this.state.show;
    show[index] = !show[index];
    this.setState({
      show,
    });
    console.log(this.state.show[index]);
  }

  render() {
    return (
      <ScrollView>
        {this.state.length === 0 && <EmptyMsg />}
        {this.state.length !== 0 && (
          <View>
            <Center _text={{ color: 'red' }}>
              <Text style={{ color: '#c0c0c0', marginTop: 10 }}>
                包括{side.getSider(this.props.search_word)}的古印
              </Text>
            </Center>
            <Center>
              <Text style={{ color: '#79cdcd', marginTop: 10 }}>
                年代-{this.props.time}
              </Text>
            </Center>
            <Center>
              <Text style={{ color: '#c0c0c0', marginTop: 10 }}>
                共检索到{this.state.laiyuan.length}枚原印质料
              </Text>
            </Center>
            <Center _text={{ color: '#eead0e', marginTop: 5 }}>
              点击印章看释文、印蜕
            </Center>
            <Center _text={{ color: '#eead0e' }}>长按印章保存或发送给朋友</Center>
            <Center _text={{ color: '#eead0e' }}>
              点击右下角太阳/月亮切换主题
            </Center>
          </View>
        )}
        {this.state.photo3.map((item, index) => {
          return (
            <Center key={index}>
              <Center>
                <TouchableOpacity
                  onPress={() => {
                    this.switchImg(index);
                  }}
                  onLongPress={()=>{
                    this.props._setName(true)
                  }}
                >
                  {
                    <Image
                      source={{
                        uri:
                          Platform.OS === 'android' ||
                          (Platform.Os === 'iOS' && Platform.Version > 14)
                            ? !this.state.show[index]
                              ? `${this.state.photo1[index]}?imageView2/0/format/webp/interlace/1/q/1`
                              : `${this.state.photo2[index]}?imageView2/0/format/webp/interlace/1/q/1`
                            : !this.state.show[index]
                            ? `${this.state.photo1[index]}`
                            : `${this.state.photo2[index]}`,
                      }}
                      fallbackSource={require('../../assets/error.webp')}
                      alt="123"
                      size="2xl"
                      resizeMethod="resize"
                    />
                  }
                </TouchableOpacity>
              </Center>
              <Button
                style={{
                  marginBottom: 20,
                  color: '#565656',
                  backgroundColor: '#fff',
                }}
                onPress={() => {
                  this.props.navigation.navigate('ImgShow', {
                    ...this.props,
                    img1: this.state.photo1[index],
                    img2: this.state.photo2[index],
                  });
                }}>
                <SearchIcon size="4" />
              </Button>
              <Center _text={{ fontSize: 16 }}>{this.state.name[index]}</Center>
              <Center _text={{ color: '#c9c9c9', fontSize: 12 }}>
                {this.state.laiyuan[index] + ' ' + this.state.niandai[index]}
              </Center>
              {this.state.search_word[index]}
            </Center>
          );
        })}
      </ScrollView>
    );
  }
}
export default Common;
